<template>
  <div class="draggable-window" :style="windowStyle">
    <div class="header" @mousedown="startDrag">
      <span>移动窗口</span>
    </div>
    <div class="content">
      <div class="seat-selection">
        <div class="seat-row" v-for="(row, rowIndex) in getData()" :key="rowIndex">
          <div class="seat-column" v-for="(col, colIndex) in row" :key="colIndex">
            <img :src="getSeatImage(col)" :alt="'Seat ' + ((rowIndex) * 3 + colIndex + 1)" class="seat-image"
              style="width: 50px; height: 50px;">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
  export default {
    name: 'DraggableWindow',
    props: {
      data: {
        type: String,
        default: ''
      },
      initialTop: {
        type: Number,
        default: 100
      },
      initialLeft: {
        type: Number,
        default: 100
      },
      initialWidth: {
        type: Number,
        default: 1280
      },
      initialHeight: {
        type: Number,
        default: 800
      },
      initialImageSrc: {
        type: String,
        default: require('@/assets/logo.png'),
      }
    },
    data() {
      return {
        seatImages: require('@/assets/seat.png'),
        hasSeatImages: require('@/assets/seat1.png'),
        imageSrc: this.initialImageSrc,
        isDragging: false,
        offsetX: 0,
        offsetY: 0,
        windowPosition: {
          top: this.initialTop,
          left: this.initialLeft
        },
        windowWidth: this.initialWidth,
        windowHeight: this.initialHeight,
        seatData: null,
      };
    },
    computed: {
      windowStyle() {
        return {
          top: `${this.windowPosition.top}px`,
          left: `${this.windowPosition.left}px`,
          width: `${this.windowWidth}px`,
          height: `${this.windowHeight}px`
        };
      }
    },
    mounted() {},
    beforeDestroy() {},
    methods: {
      getData() {
        console.log(this.data)
        return JSON.parse(this.data);
      },
      getSeatImage(value) {
        return value === 1 ? this.hasSeatImages : this.seatImages;
      },
      startDrag() {
        this.isDragging = true;
        this.offsetX = event.clientX - this.windowPosition.left;
        this.offsetY = event.clientY - this.windowPosition.top;
        document.addEventListener('mousemove', this.onDrag);
        document.addEventListener('mouseup', this.stopDrag);
      },
      onDrag(event) {
        if (this.isDragging) {
          // this.seatData = JSON.parse(this.data)
          // console.log(this.seatData)
          // console.log(this.data)
          // 计算新位置
          let newTop = event.clientY - this.offsetY;
          let newLeft = event.clientX - this.offsetX;

          // 检查边界
          const minTop = 0;
          const minLeft = 0;
          const maxTop = window.innerHeight - this.windowHeight;
          const maxLeft = window.innerWidth - this.windowWidth;

          // 限制新位置在边界内
          newTop = Math.max(minTop, Math.min(newTop, maxTop));
          newLeft = Math.max(minLeft, Math.min(newLeft, maxLeft));

          // 更新位置
          this.windowPosition.top = newTop;
          this.windowPosition.left = newLeft;
        }
      },
      stopDrag() {
        this.isDragging = false;
        document.removeEventListener('mousemove', this.onDrag);
        document.removeEventListener('mouseup', this.stopDrag);
      },
    }
  };
</script>

<style scoped>
  .draggable-window {
    position: absolute;
    border: 1px solid #ccc;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  .header {
    padding: 10px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ccc;
    cursor: move;
  }

  .content {
    padding: 10px;
    height: calc(100% - 60px);
    /* 计算减去 header 的高度 */
    overflow: hidden;
    position: relative;
    /* 添加相对定位 */
  }

  /*  .content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  } */


  .seat-selection {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    /* 设置宽度为100% */
    overflow: auto;
    /* 添加滚动条以防止溢出 */
  }

  .seat-row {
    display: flex;
    justify-content: center;
  }

  .seat-column {
    margin: 1vh;
    /* 可以根据需要调整座位之间的间距 */
  }
</style>
